<template>
	<!--成员信息/个人信息-->
	<view class="page-content">
		<view class="page-body">
			<!--成员信息-->
			<view class="body-box">
				<view class="sel-row">
					<view class="sel-row-t">头像：</view>
					<view class="sel-row-box" @click="chooseimg">
						<image class="sel_img" :src="objdata.img || defaultImg"></image>
						<view class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">昵称：</view>
					<view class="sel-row-box" @click="toedit('name')">
						<view class="sel_name">{{objdata.nickname}}</view>
						<view class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">电话：</view>
					<view class="sel-row-box" @click.stop="toedit('mobile')">
						<view class="sel_name">{{objdata.mobile}}</view>
						<view class="sel_pho" v-if="userType==='c' || userType==='d'"
							@click.stop="tophone(objdata.mobile)">拨打</view>
						<view class="sel_edit" v-if="userType==='c' || userType==='d'" @click.stop="toedit('mobile')">编辑
						</view>
						<view class="icons icon-gengduo" v-if="userType==='e'"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">邮箱：</view>
					<view class="sel-row-box" @click="toedit('email')">
						<view class="sel_name">{{objdata.email}}</view>
						<view class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">系统身份：</view>
					<view class="sel-row-box">
						<view class="sel_name">{{objdata.type===0?'创建者':objdata.type===1?'公司成员':objdata.type===2?'':'供应商'}}</view>
						<!-- <view v-if="user_statu.contact" class="icons icon-gengduo"></view> @tap="toggleTab2('2')" -->
					</view>
				</view>
				<view class="sel-row" v-if="userType==='c' || userType==='e'">
					<view class="sel-row-t">系统小组：</view>
					<view class="sel-row-box" @tap="toggleTab2('2')">
						<view class="sel_name">{{objdata.group_name}}</view>
						<view v-if="user_statu.contact" class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row" v-if="userType==='c' || userType==='e'">
					<view class="sel-row-t">系统岗位：</view>
					<view class="sel-row-box" @tap="toggleTab2('1')">
						<view class="sel_name">{{objdata.role_name}}</view>
						<view v-if="user_statu.contact" class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row" v-if="userType==='d'">
					<view class="sel-row-t">供应商：</view>
					<view class="sel-row-box" @tap="toggleTab2('1')">
						<view class="sel_name">{{objdata.syepost}}</view>
						<view v-if="user_statu.contact" class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row" v-if="userType==='e'">
					<view class="sel-row-t">收货地址</view>
					<view class="sel-row-box" @tap="toaddress" v-if="!!address">
					    <view class="sel_name">{{address.site  || ''}}</view>
						<view class="icons icon-gengduo"></view>
					</view>
					<view class="sel-row-box" @tap="toaddress" v-else>
					    <view class="sel_name">{{site}}</view>
						<view class="icons icon-gengduo"></view>
					</view>
				</view>
			</view>
			<!--聊天-删除 按钮-->
			<view class="body-box" v-if="userType==='c' || userType==='d'">
				<view class="but-row">
					<image class="but_icon" :src="$mAssetsPath.icon_msg"></image>
					<view class="but_txt1" @click="todet(objdata.uid)">发消息</view>
				</view>
				<view class="but-row">
					<image class="but_icon" :src="$mAssetsPath.icon_shanchu"></image>
					<view class="but_txt2" @click="deletes">删除</view>
				</view>
			</view>
			<!--动态-->
			<view class="body-box" v-if="userType==='e'">
				<view class="dynamic-row" @click="todynamic">
					<view class="sel-row-t">动态</view>
					<view class="sel-row-box" @tap="toggleTab2('1')" :style="{'justify-content':objlist.length>0?'space-between':'flex-end'}">
						<template v-if="objlist.length>0">
							<view class="sel-row-box-l" v-for="(item,index) in objlist.slice(0,5)" :key="index">
								<image class="sel-row-box-img" :src="item"></image>
							</view>
						</template>
						<view class="icons icon-gengduo"></view>
					</view>
				</view>
			</view>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit" v-if="tipType===1 || tipType===2">{{tipType===1?'编辑':tipType===2?'新增':''}}</view>
				<view class="w-con">
					<view class="input-row" v-if="tipType===1 || tipType===2">
						<input class="input-row-w" type="text" v-model="searchVal" placeholder="请输入编辑内容"
							confirm-type="search" placeholder-style="color:#999"></input>
						<image class="icon-tb3" v-if="searchVal!=''" @click.stop="clear"
							:src="$mAssetsPath.icon_qingchu"></image>
					</view>
					<view class="txt-row" v-if="tipType===3">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
		<!-- 下拉框 -->
		<u-popup class="popup-content" mode='bottom' border-radius="16" v-model="show">
			<view class="header">
				<view class="title">{{poptype==='1'?'任命：':poptype==='2'?'移动到：':''}}</view>
			</view>
			<scroll-view class="body" scroll-y="true">
				<block v-for="(item,index) in list" :key="index">
					<view class="box" @click="checks(item.id,item.checked)">
						<view class="box-name" :style="{color:item.checked?'#198FFF':'#999'}">{{item.label}}</view>
						<view class="box-icon">
							<image class="box-icon-dagou" v-if="item.checked" :src="$mAssetsPath.icon_dagou"></image>
						</view>
					</view>
				</block>
			</scroll-view>
			<view @tap="cancel" hover-class="none" class="footer">取消</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //搜索
	import uPopup from "@/components/u-popup/u-popup.vue"; //弹窗
	import wPopup from '@/components/w-popup/w-popup2.vue'; // 编辑框
	import {
		getUserInfos,editUserInfos,getOssUploadsParams,
		getDynamicLists, //动态列表
		getAddressLists, //地址
	} from '@/common/api.js'
	export default {
		components: {
			wSelSearch,
			uPopup,
			wPopup
		},
		data() {
			return {
				defaultImg: "/static/icon/missing-face.png", // 加载失败的占位图片
				userType: '', //c-公司 d-供应商 e-个人信息
				tipType: 0, // 1-编辑 2-新增 3-删除
				searchVal: '',
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				editType:'',

				show: false, //弹窗
				poptype: 1, //弹窗类型
				list: [/* {
					label: "公司成员",
					id: 1
				}, {
					label: "设计部",
					id: 2
				}, {
					label: "产品部",
					id: 3
				}, {
					label: "产品部",
					id: 4
				}, {
					label: "产品部",
					id: 5
				}, {
					label: "设计部",
					id: 6
				}, {
					label: "产品部",
					id: 7
				}, {
					label: "产品部",
					id: 8
				}, {
					label: "产品部",
					id: 9
				} */], //下拉框数据
				objdata: {
					uid: 99,
					img: '/static/data-img/img.jpg',
					nickname: '阿萨德',
					mobile: '13888888888',
					email: '1234567@qq.com',
					syscid: '公司成员',
					group_name: '设计组',
					role_name: '主管',
					
				},
				site:'',
				objlist: [],
				fromdata: {
					company_id: '',
					type: '1',
					page: 1,
					limit: 99
				},
				user_statu: { //权限
					add_statu: true,
					replace_statu: false,
					stick_del_statu: false,
					contact: true,
				},
				datalist:[]
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo','address']),
		},
		onShow() {
			this.getData();
		},
		onLoad(option) {
			console.log(222, option)
			if (option.userType) {
				this.userType = option.userType;
				uni.setNavigationBarTitle({
					title: '成员信息'
				});
			} else {
				this.userType = 'e';
				this.user_statu.contact = false;
				uni.setNavigationBarTitle({
					title: '个人信息'
				});
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(123, e)
			if (e.index === 0) {
				console.log(444)
				uni.navigateTo({
					url: `/pages/contact/contactSearch`
				})
			}
		},
		methods: {
			...mapActions('user', ['setUserInfo']),
			resdata(){
				this.getData();
			},
			//跳转地址页面
			toaddress() {
				uni.navigateTo({
					url: `/pages/address/address`
				})
			},
			//跳转我的动态
			todynamic() {
				uni.navigateTo({
					url: `/pages/user/userDynamic`
				})
			},
			//跳转聊天
			todet(uid) {
				uni.navigateTo({
					url: `/pages/message/messageInfo?id=${uid}`
				})
			},
			//相册更换头像
			chooseimg() {
				let _self = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(111,JSON.stringify(res));
						let filename = res.tempFiles[0]
						let file_path = res.tempFilePaths[0]
						//let suffix = "."+filename.extname;
						let file_name = new Date().getTime() + Math.random().toString(36).substring(3, 20) + filename.name;
						console.log(312,file_name,filename)
						getOssUploadsParams().then(res=>{
							console.log(123,res)
							let uploadTask = uni.uploadFile({
							    url: res.data.host,
							    filePath: file_path,
							    fileType: 'image',
							    name: 'file',
							    formData: {
							        name: file_path,
							        'key': res.data.dir+file_name,
							        'policy': res.data.policy,
							        'OSSAccessKeyId': res.data.accessid,
							        'success_action_status': '200',
							        //让服务端返回200,不然，默认会返回204
							        'signature': res.data.signature,
							    },
							    success: (res2) => {
							        console.log('uploadImage success, res is:', res2)
									_self.objdata.img = res.data.host + '/' + res.data.dir + file_name;
									//头像-修改接口
									editUserInfos({img:_self.objdata.img}).then(res3=>{
										console.log(123,res3)
										if(res3.code === 2000){
											uni.showToast({
											    title: '上传成功',
											    icon: 'success',
											    duration: 1000
											});
										}else{
											uni.showToast({
											    title: res3.msg,
											    icon: 'success',
											    duration: 1000
											});
										}
									})
							    },
							    fail: (err) => {
							        console.log('uploadImage fail', err);
							        uni.showModal({
							            content: err.errMsg,
							            showCancel: false
							        });
							    }
							});
							uploadTask.onProgressUpdate((res) => {
							    console.log("上传进度" + res.progress);
							    this.progres = res.progress;
							});
						})
					}
				});
			},
			//拨打电话
			tophone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			//编辑框
			toedit(type) {
				this.editType = type;
				if (type === 'name') {
					this.searchVal = this.objdata.nickname
					this.tipType = 1;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';
				} else if (type === 'mobile') {
					uni.navigateTo({
						url:`/pages/user/replaceMobile?mobile=${this.objdata.mobile}`
					})
				} else if (type === 'email') {
					this.searchVal = this.objdata.email
					this.tipType = 1;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';
				}
				
			},
			//删除
			deletes() {
				this.tipType = 3;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
			},
			async getData() {
				/* this.list = []
				this.list.forEach(item => {
					this.$set(item, 'checked', false)
				}) */
				this.fromdata.company_id = this.companyInfo.id
				// 获取首页轮播
				await this.getUserInfo();
				await this.getDynamicList();
				await this.getAddressList();
			},
			//用户信息
			getUserInfo(){
				getUserInfos(this.fromdata).then(res => {
					console.log(123, res)
					if (res.code === 2000) {
						this.objdata = res.data;
						this.setUserInfo(res.data);
					}
				})
			},
			//动态
			getDynamicList(){
				getDynamicLists(this.fromdata).then(res => {
					console.log(123, res)
					if (res.code === 2000) {
						if(res.data.data && res.data.data.length>0){
							this.objlist = res.data.data[0].img;
						}
					}
				})
			},
			//地址
			getAddressList(){
				getAddressLists(this.fromdata).then(res=>{
					if(res.code === 2000){
						if(res.data.data && res.data.data.length>0){
							res.data.data.forEach(item=>{
								if(item.order === 1){
									this.site = item.site
								}
							})
						}
					}
				})
			},
			checks(id, checked) {
				if (this.list && this.list.length > 0) {
					this.list.forEach(item => {
						if (item.id === id) {
							item.checked = true
						} else {
							item.checked = false
						}
					})
				}
			},
			//弹窗
			toggleTab2(poptype) {
				this.poptype = poptype
				if (this.user_statu.contact) {
					this.show = true;
				}
			},
			switchChange2(e) {
				console.log(123, e)
			},
			toggleTab(str, index) {
				this.selecl_num = index;
				this.$refs[str].show();
			},
			//下拉选择
			onSelctXL(e) {
				if (this.active === 1) {
					this.params.groupname = e.result;
				} else if (this.active === 2) {
					this.params2.groupname = e.result;
				}

			},
			//弹窗确认
			confirm() {
				this.showtip = false
				if(this.editType === 'name'){
					this.objdata.nickname = this.searchVal
					editUserInfos({nickname:this.objdata.nickname}).then(res=>{
						if(res.code === 2000){
							uni.showToast({
							    title: '修改成功！',
							    icon: 'success',
							    duration: 1000
							});
						}else{
							uni.showToast({
							    title: res.msg,
							    icon: 'success',
							    duration: 1000
							});
						}
					})
				}else if(this.editType  === 'email'){
					this.objdata.email = this.searchVal
					editUserInfos({email:this.objdata.email}).then(res=>{
						if(res.code === 2000){
							uni.showToast({
							    title: '修改成功！',
							    icon: 'success',
							    duration: 1000
							});
						}else{
							uni.showToast({
							    title: res.msg,
							    icon: 'success',
							    duration: 1000
							});
						}
					})
				}
				
			},
			todetail(id) {
				uni.navigateTo({
					url: `/pages/work/workDetail?id=${id}`
				})
			},
			//跳转指派
			todes(id) {
				uni.navigateTo({
					url: `/pages/designate/des_one?id=${id}`
				})
			},
			//重置筛选
			resetFilterData() {

			},
			//确认筛选
			setFilterData() {

			},

			change(e) {
				this.current = e.detail.current
			},
			handleActive(e) {
				let _self = this;
				_self.active = e;
			},
			//跳转比赛详情
			clickdet(id) {
				uni.navigateTo({
					url: `/pages/user/entryDetail?id=${id}`
				})
			},
			//取消
			cancel() {
				this.show = false
				this.showtip = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
			//清空
			clear() {
				this.searchVal = '';
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			/* if (this.$refs.indexPage) {
				this.$refs.indexPage.getData()
				console.log(1231)
			} */
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				color: $font-color-3;
			}

			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;

				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}

				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}

	/* 下拉窗口 */
	.popup-content {
		display: flex;
		flex-direction: column;

		.header {
			display: flex;
			border-bottom: 1rpx solid #eee;
			height: 100rpx;

			.title {
				line-height: 100rpx;
				padding: 0 30rpx;
				text-align: left;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.body {
			display: flex;
			max-height: 500rpx;
			flex-direction: column;

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 36rpx;

				.box-name {
					margin-right: 30rpx;
				}

				.box-icon {
					width: 34rpx;

					.box-icon-dagou {
						width: 34rpx;
						height: 28rpx;
					}
				}
			}
		}

		.footer {
			height: 100rpx;
			color: $font-color-r;
			font-size: 36rpx;
			text-align: center;
			line-height: 88rpx;
			background: $uni-bg-color;
			margin-right: 50rpx;
		}
	}

	.required {
		color: #FE5252;
		font-size: 28rpx;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			display: flex;
			flex-direction: column;


			.body-box {
				margin-top: 20rpx;
				padding: 0 30rpx;
				background: $uni-bg-color;
				display: flex;
				flex-direction: column;
				height: 100%;

				.but-row {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					flex-direction: row;
					border-bottom: 1rpx solid #f5f5f5;
					background: $uni-bg-box-color;

					.but_icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}

					.but_txt1 {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-b3;
					}

					.but_txt2 {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-r;
					}
				}

				.dynamic-row {
					height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					flex-direction: row;
					border-bottom: 1rpx solid #f5f5f5;
					background: $uni-bg-box-color;

					.sel-row-box {
						width: calc(100% - 70rpx);
						display: flex;
						align-items: center;

						.sel-row-box-l {
							display: flex;
							justify-content: flex-end;
							flex-wrap: wrap;
							width: calc(100% - 40rpx);
							overflow: hidden;

							.sel-row-box-img {
								width: 90rpx;
								height: 90rpx;
								border-radius: 8rpx;
								margin-right: 20rpx;
							}
						}

						.icons {
							width: 40rpx;
						}
					}

					.sel-row-t {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
						width: 200rpx;
					}

					.icons {
						color: $font-color-9;
					}
				}

				.sel-row {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					flex-direction: row;
					border-bottom: 1rpx solid #f5f5f5;
					background: $uni-bg-box-color;

					.sel-row-t {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
						width: 200rpx;
					}

					.sel-row-box {
						width: calc(100% - 200rpx);
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.sel_img {
							width: 52rpx;
							height: 52rpx;
							border-radius: 26rpx;
							margin-right: 10rpx;
						}

						.sel_name {
							font-size: 32rpx;
							font-weight: 400;
							margin-right: 10rpx;
							color: $font-color-9;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.icons {
							color: $font-color-9;
						}

						.sel_pho {
							margin-left: 20rpx;
							font-size: 24rpx;
							color: $font-color-b3;
							border: 1rpx solid $border-color-blue;
							padding: 0 10rpx;
							height: 42rpx;
							line-height: 40rpx;
							border-radius: 4rpx;
						}

						.sel_edit {
							margin-left: 20rpx;
							font-size: 24rpx;
							color: $font-color-9;
							border: 1rpx solid $font-color-9;
							padding: 0 10rpx;
							height: 42rpx;
							line-height: 40rpx;
							border-radius: 4rpx;
						}
					}
				}
			}
		}
	}
</style>
